<template>
  <v-dialog v-model="isShowCategoryPicker" persistent>

    <v-card class="mx-auto custom-card" max-width="500">

      <v-card-title class="title font-weight-regular justify-space-between">
        <span>{{ currentTitle }}</span>
      </v-card-title>


      <!-- <v-treeview activatable color="warning" :items="items"></v-treeview> -->





      <v-window v-model="step">
        <v-window-item :value="1">

          <v-card-text v-for="(item,index) in renderList" :key="index" @click="nextCategoryList(item,index)"
            :class="[customCardText,selectedActive==index?'selected-active':'']" v-ripple>
            {{item.name}}
          </v-card-text>

          <v-card-text class="text-center" v-if="noMoreData">没有更多数据</v-card-text>

        </v-window-item>
      </v-window>


      <v-card-actions>
        <div class="flex-grow-1"></div>
        <v-btn color="blue darken-1" text @click="emitHandler(0)">取消</v-btn>
        <v-btn color="blue darken-1" text @click="emitHandler(1)">确定</v-btn>
      </v-card-actions>



    </v-card>




  </v-dialog>
</template>

<script>
  import BScroll from 'better-scroll';
  export default {
    created() {},
    mounted() {},
    data() {
      return {
       items: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        },

        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' },
                  ],
                },
              ],
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' },
                  ],
                },
              ],
            },
          ],
        },


        {
          id: 15,
          name: 'Downloads :',
          children: [
            { id: 16, name: 'October : pdf' },
            { id: 17, name: 'November : pdf' },
            { id: 18, name: 'Tutorial : html' },
          ],
        },


        {
          id: 19,
          name: 'Videos :',
          children: [
            {
              id: 20,
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' },
              ],
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' },
          ],
        },





      ],
        renderList: null,
        step: 1,
        pageNo: 10,
        category: {
          id: null
        },
        //选择好要查询的物料后返回给父组件
        emitToParent: {
          name: "",
          id: "",
        },
        selectedActive: null,
        customCardText: "custom-card-text",
        finalSelected: null,
        noMoreData: false,

      }
    },
    components: {},
    props: {
      isShowCategoryPicker: {
        type: Boolean
      },
      categoryList: {
        type: Array
      }
    },

    watch: {
      categoryList(val, old) {

        // for(var i=0;i<val.length;i++){

        //   if(val[i].hasOwnProperty(child)){

        //   }else{
        //     var obj={
        //       id: val[i].id,
        //       name: val[i].name,
        //     }
        //   }


        // }






        this.renderList = val;






      }
    },

    computed: {
      currentTitle() {
        switch (this.step) {
          // case 1:
          //   return '一级类别'
          // case 2:
          //   return '二级类别'
          // default:
          //   return '物料列表'
        }
      },

    },
    methods: {
      emitHandler(index) {
        this.noMoreData = false;

        if (index == 0) {

          //关闭弹出层
          this.$emit("fromChildTurnDialogOff", {
            isShowCategoryPicker: false,
          });

          //重置渲染数组
          this.renderList = this.categoryList;
          this.selectedActive = null;

        } else {

          Object.assign(this.emitToParent, this.finalSelected);

          //如果对象中有值为空，则返回
          for (var key in this.emitToParent) {
            if (!this.emitToParent[key]) {
              return
            };
          }

          //发射事件，将选中的值传给父组件
          this.$emit('selectedCategory', this.emitToParent);

          //关闭弹出层
          this.$emit("fromChildTurnDialogOff", {
            isShowCategoryPicker: false,
          });

          //重置渲染数组
          this.renderList = this.categoryList;
          this.selectedActive = null;

          // setTimeout(() => {
          //   this.resetQuery()
          // }, 200);


        }
      },

      nextCategoryList(category, index) {



        //如果存在这个属性，说明就已经是物料级了,点击就不会有效了
        if (category.isLeaf) {

          this.finalSelected = category;

          this.selectedActive = index;

          return
        }

        //当前返回的数组
        let childCategory = this.$store.getters.getMaterialCategoryByParent(category.id);

        if (childCategory && childCategory.length > 0) {
          this.renderList = childCategory;
          return;

        } else {
          this.noMoreData = true;

          this.renderList = [];

          //点击后函数返回的如果是空数组了，那么就要将本次传进来的类别的id记录下来，用来请求物料
          this.category.id = category.id;
          this.$ajax.get('material/paging', {
            params: {
              categoryId: this.category.id,
              pageNo: this.pageNo
            }
          }).then(res => {

            if (res.data.rows.length == 0) {
              this.noMoreData = true;
              return
            } else {
              this.noMoreData = false;
              for (var i = 0; i < res.data.rows.length; i++) {

                this.renderList.push(res.data.rows[i]);

              }


            }

          })

        }

        // this.$router.push({
        //   name: 'materialList',
        //   query: {
        //     categoryId: category.id,
        //     categoryName: category.name,
        //   }
        // });

      }

    },

  };

</script>
<style scoped>
  ul,
  li {
    margin: 0;
    padding: 0 !important;
    list-style-type: none;
  }

  .dsp-flex {
    display: flex;
    justify-content: space-around;
    align-content: center;
  }


  .custom-card {
    padding: 10px;
    background: #f3f7fd;
  }

  .custom-card-text {
    box-sizing: border-box;
    background: #fff;
    margin: 5px;
    padding: 10px;
    color: #ff9859 !important;
    border-radius: 4px;
    width: auto;
  }

  .selected-active {
    background: #ff9859;
    color: #fff !important;
  }

  .text-center {
    text-align: center;
  }

</style>
